﻿@page "/uploads"

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <label for="text1" class="form-label">@Localizer["BasicUsageLabelName"]</label>
            <input id="text1" class="form-control">
        </div>
        <div class="col-12 col-sm-6">
            <label for="text2" class="form-label">@Localizer["BasicUsageLabelAdress"]</label>
            <input id="text2" class="form-control">
        </div>
        <div class="col-12">
            <label for="text3" class="form-label">@Localizer["BasicUsageLabelPhoto"]</label>
            <InputUpload TValue="string" ShowDeleteButton="true" OnChange="@OnFileChange" OnDelete="@OnFileDelete"></InputUpload>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["FormTitle"]" Introduction="@Localizer["FormIntro"]" Name="FormSettings">
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)Localizer["FormLi1"].Value)</li>
        <li>@((MarkupString)Localizer["FormLi2"].Value)</li>
    </ul>
    <ValidateForm Model="Foo" OnValidSubmit="OnSubmit">
        <div class="row g-3">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Foo.Name" />
            </div>
            <div class="col-12">
                <InputUpload @bind-Value="@Foo.Picture" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["FormButtonText"]"></Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ClickUploadTitle"]" Introduction="@Localizer["ClickUploadIntro"]" Name="ClickUpload">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <p>@((MarkupString)Localizer["ClickUploadP1"].Value)</p>
            <ButtonUpload TValue="string" IsMultiple="true" ShowProgress="true" OnChange="@OnClickToUpload" OnDelete="@(fileName => Task.FromResult(true))"></ButtonUpload>
        </div>
    </div>
    <p class="mt-3">@((MarkupString)Localizer["ClickUploadP2"].Value)</p>
    <ButtonUpload TValue="string" IsSingle="true" OnChange="@OnClickToUpload" OnDelete="@(fileName => Task.FromResult(true))" class="mt-3"></ButtonUpload>
    <p class="mt-3">@((MarkupString)Localizer["ClickUploadP3ShowUploadList"].Value)</p>
    <ButtonUpload TValue="string" OnChange="@OnClickToUploadNoUploadList" ShowUploadFileList="false" BrowserButtonText="Upload" BrowserButtonIcon="fa-solid fa-cloud-arrow-up" class="mt-3"></ButtonUpload>
</DemoBlock>

<DemoBlock Title="@Localizer["UploadedFilesTitle"]" Introduction="@Localizer["UploadedFilesIntro"]" Name="UploadedFiles">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <ButtonUpload TValue="string" ShowDownloadButton="true" OnDownload="OnDownload" OnDelete="@(fileName => Task.FromResult(true))" DefaultFileList="@DefaultFormatFileList"></ButtonUpload>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["UploadFolderTitle"]" Introduction="@Localizer["UploadFolderIntro"]" Name="UploadFolder">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <ButtonUpload TValue="string" IsDirectory="true" OnChange="@OnUploadFolder" OnDelete="@(fileName => Task.FromResult(true))"></ButtonUpload>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["AvatarUploadTitle"]" Introduction="@Localizer["AvatarUploadIntro"]" Name="AvatarUpload">
    <div class="row g-3">
        <div class="col-12">
            <p>@Localizer["AvatarUploadP1"]</p>
            <AvatarUpload TValue="string" Accept="image/*" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
        </div>
        <div class="col-12">
            <p>@Localizer["AvatarUploadP2"]</p>
            <AvatarUpload TValue="string" Accept="image/*" ShowProgress="true" IsCircle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
        </div>
        <div class="col-12">
            <p>@((MarkupString)Localizer["AvatarUploadP3"].Value)</p>
            <AvatarUpload TValue="string" IsSingle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
            <p>@((MarkupString)Localizer["AvatarUploadP5"].Value)</p>
            <p></p>
            <AvatarUpload TValue="string" Accept="image/gif, image/jpeg" IsSingle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
        </div>
        <div class="col-12">
            <p>@((MarkupString)Localizer["AvatarUploadP6"].Value)</p>
            <AvatarUpload TValue="string" Accept="image/gif, image/jpeg" IsSingle="true" DefaultFileList="@PreviewFileList"
                          OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))" />
        </div>
        <div class="col-12">
            <p>@((MarkupString)Localizer["AvatarUploadP7"].Value)</p>
            <ValidateForm Model="Foo" OnValidSubmit="OnAvatarValidSubmit">
                <div class="row g-3">
                    <div class="col-12">
                        <BootstrapInput @bind-Value="@Foo.Name" />
                    </div>
                    <div class="col-12">
                        <AvatarUpload @bind-Value="@Foo.Picture" IsSingle="true" />
                    </div>
                    <div class="col-12">
                        <Button ButtonType="@ButtonType.Submit" Text="@Localizer["AvatarUploadButtonText"]"></Button>
                    </div>
                </div>
            </ValidateForm>
        </div>
    </div>
    <BlockLogger @ref="AvatarTrace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["PreCardStyleTitle"]" Introduction="@Localizer["PreCardStyleIntro"]" Name="PreCardStyle">
    <p>
        <div>@((MarkupString)Localizer["PreCardStyleSSR"].Value)</div>
        <div>@((MarkupString)Localizer["PreCardStyleServerSide"].Value)</div>
        <div>@((MarkupString)Localizer["PreCardStyleWasm"].Value)</div>
        <div>@((MarkupString)Localizer["PreCardStyleWasmSide"].Value)</div>
        <div>@((MarkupString)Localizer["PreCardStyleLink", SiteOptions.CurrentValue.VideoLibUrl].Value)</div>
        <div>@((MarkupString)Localizer["PreCardStyleValidation"].Value)</div>
    </p>
    <div class="row g-3">
        <div class="col-12">
            <p>@((MarkupString)Localizer["PreCardStyleP1"].Value)</p>
            <CardUpload TValue="string" ShowProgress="true" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>
        </div>
        <div class="col-12">
            <p>@((MarkupString)Localizer["PreCardStyleP2"].Value)</p>
            <CardUpload TValue="string" IsSingle="true" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["FileIconTitle"]" Introduction="@Localizer["FileIconIntro"]" Name="FileIcon">
    <CardUpload TValue="string" ShowDownloadButton="true" DefaultFileList="@DefaultFormatFileList" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>
</DemoBlock>

<DemoBlock Title="@Localizer["FileIconTemplateTitle"]" Introduction="@Localizer["FileIconTemplateIntro"]" Name="IconTemplate">
    <CardUpload TValue="string" ShowDownloadButton="true" DefaultFileList="@DefaultFormatFileList" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))">
        <IconTemplate>
            <FileIcon Extension="@context.GetExtension()">
                <BackgroundTemplate>
                    <i class="fa-regular fa-clipboard fa-4x" />
                </BackgroundTemplate>
            </FileIcon>
        </IconTemplate>
    </CardUpload>
</DemoBlock>

<DemoBlock Title="@Localizer["Base64FormatTitle"]" Introduction="@Localizer["Base64FormatIntro"]" Name="Base64">
    <CardUpload TValue="string" DefaultFileList="@Base64FormatFileList" IsSingle="true" />
</DemoBlock>

<AttributeTable Items="@GetInputAttributes()" Title="InputUpload" />

<AttributeTable Items="@GetButtonAttributes()" Title="ButtonUpload/CardUpload" />

<AttributeTable Items="@GetAvatarAttributes()" Title="AvatarUpload" />
